﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>review</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>

    <style>
        [v-cloak]{display: none}/*页面刚渲染时变成none，渲染完以后，vue会把none改成cloak*/
    </style>
</head>
<body>
    <h1>review</h1><br/>

    <div id="app" v-cloak>
        {{name}}
        v-text取代{{}}写着不舒服。用v-cloak<br/>
        v-once绑定一次，数据再次变化时不会导致视图刷新，写在不想刷新的标签上<br/>
        v-html将html字符串转化成html<br/>
        v-for循环(数组，对象，字符串，数字)<br/>
        <div v-for="obj in arr">{{obj}}</div><br/>
        <div v-for="(obj,index) in arr">{{obj}}</div><br/>
        <div v-on:click="me"></div><br/>
    </div>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>

<script>
    var app = new Vue({
        el:'#app',
        data:{
            name:'模版数据',
            arr:[]
        },
        methods:{
            //绑定给dom元素，需要定义在methods中，不能和data里的内容重名，this指向的是实例，
            //不能使用箭头函数，事件源对象如果不写括号，可以自动传入，否则只能手动传入$event
            me(){

            }
        }
    });
</script>

</body>
</html>